<template>
  <div class="container">
    <div class="monitor-card" v-if="!detailShow">
      <a-card size="small" class="head" :bordered="false" :hoverable="true">
        <BoxCardTpl class="head-card">
          <div class="list">
            <div class="item" v-for="item in options" :key="item.prop">
              <div class="item-title">
                <a-image :preview="false" class="item-image item-image-left" :src="`/images/title-side-${item.icon}.svg`" />
                <div class="text" :style="`color: ${item.color}`">{{ item.label }}</div>
                <a-image :preview="false" class="item-image" :src="`/images/title-side-${item.icon}.svg`" />
              </div>
              <div class="item-number" :style="`color: ${item.color}`">{{ totalList[item.prop] }}</div>
              <div class="item-echarts">
                <a-progress type="circle" :percent="getPercent(item)" trailColor="#24252C" :strokeColor="item.color">
                  <template #format="percent">
                    <div class="item-percent" :style="`color: ${item.color}`">{{ percent.toFixed(0) }}%</div>
                  </template>
                </a-progress>
              </div>
            </div>
          </div>
        </BoxCardTpl>
      </a-card>
      <div class="content">
        <div class="table">
          <a-card size="small" class="card" :bordered="false" :hoverable="true">
            <chartsCard @detail="boxInfoShow" />
          </a-card>
        </div>
        <div class="box-info">
          <BoxInfoCard ref="boxInfoRef" @detail="iframeShow" />
        </div>
      </div>
    </div>
    <div class="frame-card" v-else>
      <frameCard ref="frameRef" @close="iframeClose" />
    </div>
  </div>
</template>
<script setup>
  import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
  import BoxCardTpl from './card.vue';
  import frameCard from './frame.vue';
  import chartsCard from './charts.vue';
  import BoxInfoCard from './boxInfo.vue';

  const totalList = ref({
    total: 10,
    line: 2,
    disable: 8,
    fault: 0,
    alarm: 0,
  });
  const options = ref([
    {
      label: '设备总数',
      prop: 'total',
      icon: 'blue',
      color: '#047aff',
    },
    {
      label: '当前在线',
      prop: 'line',
      icon: 'green',
      color: '#00d38d',
    },
    {
      label: '离线',
      prop: 'disable',
      icon: 'grey',
      color: '#bbb',
    },
    {
      label: '禁用',
      prop: 'alarm',
      icon: 'red',
      color: '#fe694a',
    },
    {
      label: '故障',
      prop: 'fault',
      icon: 'yellow',
      color: '#ffba00',
    },
  ]);
  const detailShow = ref(false);
  const frameRef = ref();
  const boxInfoRef = ref();

  function getPercent(item) {
    if (!totalList.value.total) {
      return 0;
    } else {
      return (totalList.value[item.prop] / totalList.value.total) * 100;
    }
  }

  function boxInfoShow(row) {
    boxInfoRef.value.open(row);
  }

  function iframeShow(row) {
    detailShow.value = true;
    nextTick(() => {
      frameRef.value.open(row);
    });
  }

  function iframeClose() {
    detailShow.value = false;
  }
</script>

<style scoped lang="less">
  .container {
    height: 100%;
  }
  .monitor-card {
    .head {
      padding: 20px;
      background-color: #24252c;
      .head-card {
        width: 100%;
        padding: 24px;
        .title {
          font-size: 24px;
          color: #fff;
        }
        .title-line {
          width: 222px;
          height: 2px;
          background: linear-gradient(270deg, rgba(4, 122, 255, 0.05), #047aff);
          margin-top: 16px;
          margin-bottom: 16px;
        }
        .list {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .item {
            width: 18%;
            height: 280px;
            background-color: #13171c;
            border-radius: 2px;
            word-break: keep-all;
            .item-title {
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 16px;
              ::v-deep .item-image {
                width: 54px;
                height: 34px;
              }
              ::v-deep .item-image-left {
                transform: rotate(180deg);
              }
              .text {
                font-size: 20px;
              }
            }
            .item-number {
              height: 86px;
              padding: 24px 0 16px;
              text-align: center;
              font-size: 32px;
              font-weight: 500;
            }
            .item-echarts {
              display: flex;
              justify-content: center;
              align-items: center;
              .item-percent {
                text-align: center;
              }
            }
          }
        }
      }
    }
    .content {
      margin-top: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .table {
        width: 70%;
      }
      .box-info {
        width: calc(30% - 20px);
      }
    }
  }
  .frame-card {
    height: 100%;
  }
</style>
